import React, { useRef, useState } from 'react'
import SearchDropdown from '../SearchDropdown';

const Header = () => {
  const [searchDropdownVisible, setSearchDropdownVisible] = useState(false);
  const [searchValue, setSearchValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <header className="header-container">
      <div className="top-search-bar-v2">
        <div className="top-bar-tabs-v2">
          <button className="tab-v2 active">
            <svg className="tab-svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="3" y="5" width="14" height="10" rx="3" stroke="#2260ff" strokeWidth="1.5"/><rect x="7" y="15" width="6" height="2" rx="1" fill="#2260ff"/></svg>
            设计模板
          </button>
          <button className="tab-v2">
            <svg className="tab-svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 15V5h10v10H5z" stroke="#888" strokeWidth="1.5"/><path d="M8 8h4v4H8z" fill="#888"/></svg>
            AI创作
          </button>
          <span className="tab-badge-v2">2.0 一键生海报</span>
        </div>
        <div className="top-bar-search-row-v2" style={{ position: 'relative' }}>
          <span className="search-icon-v2">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="10" cy="10" r="7" stroke="#bfc8d7" strokeWidth="2"/><path d="M16 16l4 4" stroke="#bfc8d7" strokeWidth="2" strokeLinecap="round"/></svg>
          </span>
          <input
            ref={inputRef}
            className="search-input-v2"
            placeholder="输入关键词搜索你想要的模板或素材"
            value={searchValue}
            onFocus={() => setSearchDropdownVisible(true)}
            onChange={e => setSearchValue(e.target.value)}
          />
          <button className="search-camera-btn-v2">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="7" width="16" height="10" rx="2" stroke="#bfc8d7" strokeWidth="1.5"/><circle cx="11" cy="12" r="3" stroke="#bfc8d7" strokeWidth="1.5"/></svg>
          </button>
          <button className="search-btn-v2">搜索</button>
          {searchDropdownVisible && (
            <div
              style={{
                position: 'absolute',
                left: inputRef.current ? inputRef.current.offsetLeft : 0,
                top: inputRef.current ? inputRef.current.offsetTop + inputRef.current.offsetHeight : 48,
                width: inputRef.current ? inputRef.current.offsetWidth : 400,
                zIndex: 100
              }}
            >
              <SearchDropdown
                visible={true}
                onClose={() => setSearchDropdownVisible(false)}
                value={searchValue}
              />
            </div>
          )}
        </div>
        <div className="top-bar-tags-v2">
          <span className="tag-v2"><span className="tag-icon">✉️</span>大暑</span>
          <span className="tag-v2"><span className="tag-icon">🏆</span>喜报</span>
          <span className="tag-v2"><span className="tag-icon">📄</span>邀请函</span>
          <span className="tag-v2"><span className="tag-icon">🟥</span>小红书</span>
          <span className="tag-v2"><span className="tag-icon">🌞</span>早安</span>
          <span className="tag-v2"><span className="tag-icon">🖨️</span>3D打印手办</span>
          <span className="tag-v2"><span className="tag-icon">🔥</span>印刷海报</span>
        </div>
      </div>
    </header>
  )
}

export default Header
